<template>
    <div class="survey-view-container" :key="this.models.dataId" >
            <el-row class="survey-view-row">
            <el-col :span="12" class="map-container">
                <open-map mapWidth="100%" mapHeight="100%"   @polygonChange="polygonAreaHandler" @positionChange="positionChangeHandler" ref="areaMap"  :vectorId="models.vectorId" :polygon="models.polygon" :position="models.position">
                    <template #card>
                        <div class="boundary-bottom">
                            <el-row>
                                <el-col>坐标：<span @click="moveToPositionHandler">{{ models.position && models.position.join(',') }}</span></el-col>
                                <el-col>面积：{{ polygonArea }} 平方米</el-col>
                            </el-row>
                        </div>
                    </template>
                </open-map>
            </el-col>
            <el-col :span="12" height="100%" >
                <survey-model ref="surveyComp"  :structureId="models.structureId" :showHistory="true"  tableHeight="100vh"></survey-model> 
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Ref,Watch } from 'vue-property-decorator';
import router from '@/router/index';
import OpenMap from '@/components/OpenMap.vue';
import SurveyModel from '@/components/SurveyModel.vue';
import {getFormData} from '@/api/investDataCommon';
 
@Component({ components: { SurveyModel,OpenMap } })
export default class surveyView extends Vue {

    @Ref("surveyComp") surveyComp!:any;
    @Ref("areaTreeSelect") areaTreeSelect!:any;
    @Ref("deptSelect") deptSelect!:any;
    @Ref("areaMap") areaMap!:any;
    activeTab='chart2'
    polygonArea=0;
    models: any = {

        structureId: '',
        dataId: '',
        vectorId:'',
        position:'',

    }

    positionChangeHandler(val){
        if(val && val.length >0){
            this.models.formData.point = val.join(',');
        }
    }
    areaSearchFun(value: any): void {
        this.areaTreeSelect.filterFun(value);
    }

    moveToPositionHandler(){
        if(this.models.position && this.models.position.length == 2){
            this.areaMap.updatePosition(this.models.position);
        }
    }

    polygonAreaHandler(area){
     
        this.polygonArea =area;
    }

    cancelHandler(){
        this.$router.back();
    }
    @Watch('$route.query.dataId',{immediate:true})
    routerChangeHandler(val){
        if(val){
            this.models.structureId = router.currentRoute.query.structureId;
            this.models.dataId =  router.currentRoute.query.dataId;
            getFormData({id: this.models.dataId}).then(res =>{
                
                const common:any = res.data.commonForm;
                this.models.areaId = common.areaId;
                this.models.vectorId = common.vectorId;
                if(common.position){
                    this.models.position  = common.position.split(',');
                }
    
                this.models.polygon  = common.polygon;
                this.surveyComp.addFormData(res.data);

            })
        }
        
    }
}
</script>
<style scoped>

.survey-view-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.survey-view-row {
    display: flex;
    flex: 1;
    min-height: 0; /* 修复弹性盒子最小高度问题 */
}

.map-container, .form-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* 修复弹性盒子最小高度问题 */
}


.boundary-bottom {
        /* background-color: #fff; */
        position: absolute;
        padding: 10px;
        bottom: 20px;
        left: 18px;
        color:#1e00ff;
        opacity: 0.4;
        z-index: 1000;
        font-weight:1000;
}
</style>
